import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
    TextInput
} from 'react-native';


export default class App extends Component<{}> {

    constructor(){
        super();
        this.state = {
          title:'',
            content:'',
            aid:0,
        }
    }

    // 点击按钮之后触发的方法
  foo(){
      // alert(this.state.aid);
      fetch('http://47.100.185.180/api/article.php?aid='+this.state.aid)
          .then(x => {
            // console.log(x);
              this.setState({
                  title:JSON.parse(x._bodyText).title,
                  content:JSON.parse(x._bodyText).content,
              })
          })
  }

  // 当输入框里面的内容发生改变，会触发这个方法
    inputchange(con){
      this.setState({
          aid:con
      })
    }

  render() {
    return (
      <View style={styles.container}>
        {/*输入框*/}
        <TextInput
          style={styles.in}
          onChangeText={this.inputchange.bind(this)}
        ></TextInput>
          {/*bind用来将前面函数的this指向修改为传入的对象*/}
        <Text style={styles.btn} onPress={this.foo.bind(this)}>
          点我获得资讯
        </Text>
          <Text style={styles.art}>标题：{this.state.title}</Text>
          <Text style={styles.art}>内容：{this.state.content}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  btn:{
    backgroundColor:'green',
      width:'60%',
      height:100,
      color:'white',
      textAlign:'center',
      lineHeight:100,
      fontSize:30
  },
    in:{
      fontSize:40
    },
    art:{
      fontSize:25
    }
});




